<template>
    <div class="m-header">
        <div class="icon"></div>
        <div class="text">Finn Music</div>
        <router-link tag="div" class="mine" to="/user">
            <i class="icon-mine"></i>
        </router-link>
    </div>
</template>
<script>
export default {
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl'

.m-header
  position: relative
  height: 44px
  width: 100%
  text-align: center
  color: $color-theme
  .icon
    display inline-block
    height: 32px
    width: 30px
    bg-image(logo)
    margin-top: 6px
    margin-right: 9px
    vertical-align: top
    background-size: 30px 32px
  .text
    display: inline-block
    font-size: 18px
    line-height: 44px
    vertical-align: top
  .mine
    position: absolute
    top: 0
    right: 0
    display: inline-block
    .icon-mine
      display: block
      font-size: 20px
      padding: 12px
</style>